body {
background-color: #151515;
display: grid;
place-items: center;
height: 100vh;
}
.wrapper a {
color: #fff;
}
.hover-fx {
font-size: 2rem;
display: inline-block;
cursor: pointer;
margin: 15px;
width: 80px;
height: 80px;
line-height: 84px;
border-radius: 50%;
text-align: center;
position: relative;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
transition: 300ms;
}
.hover-fx:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
box-sizing: content-box;
box-shadow: 0 0 0 3px #fff;
top: 0;
left: 0;
opacity: 0;
transition: 300ms;
}
.hover-fx:hover {
background-color: #fff;
color: #151515;
}
.hover-fx:hover:after {
opacity: 1;
transform: scale(1.15);
}